<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getExpressTakeMe, delExpress, getTakeByOrderNo, cancelExpress, confirmReceive } from '@/api/express'
import type { ExpressTake } from '@/api/express/type'
import { getDeliveryTime, getSexLimit, reqExpressType } from './common'
import { toast } from '@/utils/common'
import { baseUrl } from '@/config'

const expressTake = ref<ExpressTake>()
const expressType = ref({})
const id = ref<number>()
const orderNo = ref<string>('')
const textColor = ref<string>('#ff7744')

const loadExpressTake = async () => {
  if (orderNo.value) {
    const res = await getTakeByOrderNo(orderNo.value)
    handlerRes(res)
    id.value = res.data.id
    return
  }
  const res = await getExpressTakeMe(id.value)
  handlerRes(res)
}

const handlerRes = async (res: any) => {
  expressTake.value = res.data
  if (expressTake.value?.applyStatus === 1) {
    textColor.value = '#ff7744'
  }
  if (expressTake.value?.applyStatus === 2) {
    textColor.value = '#33be59'
  }
  if (expressTake.value?.applyStatus === 3) {
    textColor.value = '#eb3030'
  }
  expressTake.value.expressTakeDetails.forEach(item => {
    item.pictureArr = []
    item.picture.split(',').forEach((img, index) => {
      item.pictureArr.push({
        status: 'success',
        message: '',
        url: baseUrl + img
      })
    })
  })
}

const loadExpressType = async () => {
  const res = await reqExpressType()
  res.forEach(item => {
    expressType.value[item.type] = item.name
  })
}

onLoad(async (option: any) => {
  id.value = option.id
  orderNo.value = option.orderNo
  await loadExpressTake()
  loadExpressType()
})

const canExpress = () => {
  uni.showModal({
    title: '提示',
    content: '确认取消该快递吗？',
    success: async (res: any) => {
      if (!res.confirm) {
        return
      }
      try {
        await cancelExpress(id.value)
        toast('取消成功')
        loadExpressTake()
      } catch (error) {
        toast(error.tips)
      }
    }
  })
}

const deleteExpress = () => {
  uni.showModal({
    title: '提示',
    content: '确认删除该快递吗？',
    success: async (res: any) => {
      if (!res.confirm) {
        return
      }
      try {
        await delExpress(id.value)
        toast('删除成功')
        uni.reLaunch({ url: '/pages/express/my' })
      } catch (error) {
        toast(error.tips)
      }
    }
  })
}

const jumpToApplyRecord = () => {
  uni.navigateTo({
    url: `/pages/express/applyRecord?id=${expressTake.value.id}`
  })
}

const confirmExpress = async () => {
  try {
    const res = await confirmReceive(id.value)
    toast(res.data)
    loadExpressTake()
  } catch (error) {
    toast(error.tips)
  }
}
</script>

<template>
  <view class="express-detail">
    <user-info class="express-detail-userinfo" :data="expressTake">
      <uv-tags type="success" text="待接单" v-if="expressTake?.status === 0"></uv-tags>
      <uv-tags type="success" text="已接单" v-if="expressTake?.status === 1"></uv-tags>
      <uv-tags type="success" text="已送达" v-if="expressTake?.status === 2"></uv-tags>
      <uv-tags type="error" text="已取消" v-if="expressTake?.status === 3"></uv-tags>
      <uv-tags type="success" text="已结束" v-if="expressTake?.status === 4"></uv-tags>
    </user-info>
    <view class="express-detail-desc">
      <uv-list class="express-detail-desc-item">
        <uv-list-item title="收件地址" :border="true"
          :right-text="expressTake?.address.building + expressTake?.address.address + ''"></uv-list-item>
        <uv-list-item title="期望送达时间" :border="true"
          :right-text="getDeliveryTime()[expressTake?.deliveryTime]"></uv-list-item>
        <uv-list-item title="性别限制" :border="true" :right-text="getSexLimit()[expressTake?.sexLimit]"></uv-list-item>
        <uv-list-item title="快递数量" :border="true" :right-text="expressTake?.amount + '件'"></uv-list-item>
        <uv-list-item title="佣金" :border="true"
          :right-text="expressTake?.bounty ? '￥' + expressTake?.bounty : '0'"></uv-list-item>
        <uv-list-item v-if="expressTake?.remark" title="备注" :border="true"
          :right-text="expressTake?.remark"></uv-list-item>
      </uv-list>
      <view class="express-detail-desc-list">
        <uv-list class="express-detail-desc-list-item" v-for="(detail, index) in expressTake?.expressTakeDetails"
          :key="index">
          <uv-list-item title="取件地址" :right-text="detail?.expressStation"></uv-list-item>
          <uv-list-item title="取件码" :right-text="detail?.takeCode"></uv-list-item>
          <uv-list-item title="快递大小" :border="true" :right-text="expressType[detail?.type]"></uv-list-item>
          <uv-list-item title="金额" :border="true" :right-text="'￥' + detail?.price"></uv-list-item>
          <uv-list-item title="快递图片/短信截图">
            <template #footer>
              <uv-upload :fileList="detail.pictureArr" name="picture" multiple :maxCount="detail.pictureArr.length"
                :previewFullImage="true" :disabled="true" :deletable="false"></uv-upload>
            </template>
          </uv-list-item>
        </uv-list>
      </view>
    </view>
    <view class="express-detail-btn">
      <view class="express-total">
        合计：
        <view>
          ￥{{ expressTake?.price }}
        </view>
        <view v-if="expressTake?.bounty">
          +￥{{ expressTake?.bounty }}
        </view>
      </view>
      <view class="express-opt">
        <uv-button class="express-opt-btn" type="error" v-if="expressTake?.status === 3"
          @click="deleteExpress">删除</uv-button>
        <uv-button class="express-opt-btn" type="warning" v-if="expressTake?.status === 0"
          @click="canExpress">取消</uv-button>
        <uv-button class="express-opt-btn" type="warning" v-if="expressTake?.status === 2"
          @click="confirmExpress">确认收货</uv-button>
        <uv-button class="express-opt-btn" color="#ff7744" v-show="expressTake?.status !== 3"
          @click="jumpToApplyRecord">申请记录</uv-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.express-detail {
  padding-bottom: 200rpx; // 添加底部内边距防止内容被遮挡
}

.express-detail-userinfo {
  background-color: #fff;
}

.express-detail-desc {
  background-color: #fff;

  .express-detail-desc-list {
    padding: 20rpx;

    .express-detail-desc-list-item {
      padding: 20rpx;
      border: 1px solid #eee;
      border-radius: 50rpx;
      margin-bottom: 10rpx;
    }
  }
}

.express-detail-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  background-color: #fff;

  padding: 20rpx;
  display: flex;
  justify-content: space-between;

  .express-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ff7744;
    font-weight: bold;
  }

  .express-opt {
    display: flex;

    &-btn {
      margin-left: 10rpx;
    }
  }
}
</style>
